<!DOCTYPE html>
<html>

<head lang="en">
	<meta charset="UTF-8">
	<title>自定义播放器</title>
	<link rel="stylesheet" href="../css/font-awesome.css" />
	<link rel="stylesheet" href="../css/player.css" />
</head>

<body>
	<figure>
		<figcaption>视频播放器</figcaption>
		<div class="player">
			<video src="../video/fun.mp4"></video>
			<div class="controls">
				<!--自定义按钮,播放/暂停-->
				<a href="javascript:;" class="switch fa fa-play"></a>
				<!--播放进度-->
				<div class="progress">
					<div class="line"></div>
					<div class="bar"></div>
				</div>
				<!--当前播放时间/播放总时长-->
				<div class="timer">
					<span class="current">00:00:00</span> / <span class="total">00:00:00</span>
				</div>
				<!--全屏/取消全屏-->
				<a href="javascript:;" class="expand fa fa-arrows-alt"></a>
			</div>
		</div>
	</figure>
	<script src="../js/jquery.min.js"></script>
	<script>
		$(function () {
			// 获取需要操作的元素
			// 多媒体相关的api都是dom元素提供的
			var $video = $('video');
			// 因为api是属于原生的dom元素的
			var video = $video.get(0);
			// 播放和暂停
			var $switch = $('.switch');
			// 总时长
			var $total = $('.total');
			// 进度条
			var $line = $('.line');
			// 当前播放时间
			var $current = $('.current');
			// 全屏按钮
			var $expand = $('.expand');
			// 灰色进度条
			var $bar = $('.bar');

			var formatTime = function (time) {
				// 00:00:00
				var h = Math.floor(time / 3600);
				var m = Math.floor(time % 3600 / 60);
				var s = Math.floor(time % 60);
				return (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s)
			}

			// 需要在加载是时候,显示加载状态,当前视频加载到可以播放了就可以隐藏这个状态
			video.oncanplay = function () {
				$video.show();
				// 加载效果,总时长显示,总时间显示
				$total.html(formatTime(video.duration));
			}

			// 播放,暂停
			$switch.on('click', function () {
				// 判断当前的播放状态
				if ($switch.hasClass('fa-play')) {
					video.play();
					$switch.removeClass('fa-play').addClass('fa-pause');
				} else {
					video.pause();
					$switch.removeClass('fa-pause').addClass('fa-play');
				}
			});

			// 进度条显示
			video.ontimeupdate = function () {
				//console.log('当前播放时间：'+video.currentTime);
				// 计算进度条的宽度,根据当前播放时间/总时间
				var p = video.currentTime / video.duration * 100 + '%';
				$line.css('width', p);
				// 播放时间显示
				$current.html(formatTime(video.currentTime));
			}
			// 全屏操作
			$expand.on('click', function () {
				if ($(this).hasClass('fa-arrows-alt')) {
					video.webkitRequestFullScreen();
					// 改按钮,收起全屏按钮
					$(this).removeClass('fa-arrows-alt').addClass('fa-compress');
				} else {
					document.webkitCancelFullScreen();
					$(this).addClass('fa-arrows-alt').removeClass('fa-compress');
				}

			})
			// 视频播放完成重置播放
			video.onended = function () {
				video.currentTime = 0;
				$switch.removeClass('fa-pause').addClass('fa-play');
			}
			// 跃进功能
			$bar.on('click', function (e) {
				// e.offsetX,e.offsetY:当前点击的地方距离坐标的坐标和上边的坐标,相对于当前元素
				// 获取点击的位置距离进度条左侧的距离
				var p = e.offsetX / $bar.width();
				var goTime = p * video.duration;
				// 触发,播放时间更改事件.必须视频加载完成的时候才能看到效果.遇到跃进没有效果,file形式打开页面
				video.currentTime = goTime;
			})
		});
	</script>
</body>

</html>